<template>
    <div class="common-details">
        <common-title title="日期与分类统计" backPath="/question"></common-title>
        <div class="common-page">
            <div class="common-tabs">
                <div @click="changeTab(0)" class="common-tabs-child" :class="{active: currentTab === 0}">日期统计</div>
                <div @click="changeTab(1)" class="common-tabs-child" :class="{active: currentTab === 1}">分类统计</div>
            </div>
            <div class="common-tab-content" style="padding: 20px 0">
                <div class="query-table-page">
                    <div class="table-box">
                        <div class="table-list" v-if="currentTab === 0">
                            <el-table :key="tbKey" ref="commonTable" :data="tableData" border stripe style="width: 100%" height="620px">
                                <el-table-column type="index" label="序号" width="60"/>
                                <el-table-column prop="time" label="日期"/>
                                <el-table-column prop="xxwhd" label="学校未回答"/>
                                <el-table-column prop="xxyhd" label="学校已回答"/>
                                <el-table-column prop="xxqb" label="学校全部"/>
                                <el-table-column prop="szbwhd" label="省招办未回答"/>
                                <el-table-column prop="szbyhd" label="省招办已回答"/>
                                <el-table-column prop="szbqb" label="省招办全部"/>
                            </el-table>
                        </div>
                        <div class="table-list" v-else>
                            <el-table :key="tbKey" ref="commonTable" :data="tableData2" border stripe style="width: 100%" height="620px">
                                <el-table-column type="index" label="序号" width="60"/>
                                <el-table-column prop="time" label="日期"/>
                                <el-table-column prop="xxwhd" label="学校未回答"/>
                                <el-table-column prop="xxyhd" label="学校已回答"/>
                                <el-table-column prop="xxqb" label="学校全部"/>
                                <el-table-column prop="xxzb" label="占比"/>
                                <el-table-column prop="szbwhd" label="省招办未回答"/>
                                <el-table-column prop="szbyhd" label="省招办已回答"/>
                                <el-table-column prop="szbqb" label="省招办全部"/>
                                <el-table-column prop="szbzb" label="占比"/>
                            </el-table>
                        </div>
                        <div class="paging-box">
                            <el-pagination
                                    v-model:current-page="currentPage"
                                    v-model:page-size="pageSize"
                                    :page-sizes="[10, 20, 50, 100]"
                                    :size="size"
                                    :background="background"
                                    layout="total, prev, pager, next, sizes, jumper"
                                    :total="124"
                                    @size-change="handleSizeChange"
                                    @current-change="handleCurrentChange"
                            />
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import CommonTitle from "@/components/common-title.vue"
import {ref, onMounted, shallowRef, onBeforeUnmount} from "vue"
import "@wangeditor/editor/dist/css/style.css"
import {Editor, Toolbar} from "@wangeditor/editor-for-vue"
import {useRoute} from "vue-router"
const route = useRoute()
import {whetherDict, categoryDict, nameList} from '@/utils/dict'
const parentObj = ref(route.query)
const addObj = ref({
    title: '',
    author: '',
    source: '',
    pinTop: '',
    release: '',
    columnGroup: [],
    createTime: '',
    showTime: '',
    addNew: '',
    url: '',
    keyword: '',
    introduction: ''
})
const sourceList = ref([
    {code: '1', name: '湖北省招生办'},
    {code: '2', name: '湖北省教育厅'},
    {code: '3', name: '教育部'},
])
const rules = ref({
    title: [
        {required: true, message: '请输入标题', trigger: 'blur'}
    ],
    author: [
        {required: true, message: '请输入作者', trigger: 'blur'}
    ],
    source: [
        {required: true, message: '请输入来源', trigger: 'blur'}
    ],
    pinTop: [
        {required: true, message: '请选择是否置顶', trigger: 'change'}
    ],
    release: [
        {required: true, message: '请选择是否同时发布', trigger: 'change'}
    ]
})
const currentTab = ref(0)
function changeTab(index) {
    currentTab.value = index
}
const tableData = ref([])
const tableData2 = ref([
    {
        time: '计划信息',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },
    {
        time: '政策规定',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '投档线',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '投档规则',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '录取规则',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '录取状态',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '举报投诉',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '征集志愿',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '录取进程',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    },{
        time: '其他问题',
        xxwhd: '12',
        xxyhd: '12',
        xxqb: '12',
        szbwhd: '12',
        szbyhd: '12',
        szbqb: '12',
        xxzb: '0.528%',
        szbzb: '0.528%'
    }
])
const content = ref('')
const toolbarConfig = {
    toolbarKeys: [
        "headerSelect",  // 标题选择
        'bold', // 加粗
        'italic', // 斜体
        'through', // 删除线
        'underline', // 下划线
        'justifyCenter', // 居中对齐
        'justifyJustify', // 两端对齐
        'justifyLeft', // 左对齐
        'justifyRight', // 右对齐
        'bulletedList', // 无序列表
        'numberedList', // 有序列表
        'color', // 文字颜色
        'insertLink', // 插入链接
        'fontSize', // 字体大小
        'lineHeight', // 行高
        'delIndent', // 缩进
        'indent', // 增进
        'divider', // 分割线
        'insertTable', // 插入表格
        'undo', // 撤销
        'redo', // 重做
        'clearStyle', // 清除格式
        'fullScreen', // 全屏
        "blockquote", // 引用
        "codeBlock", // 代码块
        "insertImage", // 插入图片
        "uploadImage", // 上传图片
        "insertVideo", // 插入视频
    ]
}
const editorConfig = {
    placeholder: '请输入内容...', //初始的提示内容
    MENU_CONF: {
        uploadImage: {
            server: 'https://.....',  // 图片上传接口
            fieldName: 'file',  // 上传字段名，根据自己的接口参数配置
        }
    }
}
const editorRef = shallowRef()
const handleCreated = (editor) => {
    editorRef.value = editor
}
const submit = () => {
    console.log(content.value);
}
onMounted(() => {
    for (let i = 0; i < 20; i++) {
        tableData.value.push({
            time: '2022-05-01',
            xxwhd: '12',
            xxyhd: '12',
            xxqb: '12',
            szbwhd: '12',
            szbyhd: '12',
            szbqb: '12'
        })
    }
})
onBeforeUnmount(() => {
    const editor = editorRef.value
    if (editor == null) return
    editor.destroy()  // 销毁 editor 实例
})
</script>
<style scoped lang="less">
.common-details-wrap {
    background: #fff;
    padding: 12px;
    margin-top: 16px;

    .rich-editor {
        border: 1px solid #ccc;
        min-width: 365px;
        max-width: 100%;
    }
    .common-btn{
        display: flex;
        margin: 20px 0;
        justify-content: center;
    }
}
</style>